'use strict';
import React from "react";
import {
    Image,
    Text,
    View,
    TouchableOpacity,
    StyleSheet,
    Dimensions,
    ListView,
    Animated,
    ActivityIndicator,
    InteractionManager
} from "react-native";
import ParallaxScrollView from "react-native-parallax-scroll-view";
import ImageViewer from "./ImageViewer";
import FixedHeader from "../Components/FixedHeader";
import ViewPager from "react-native-viewpager";
import Global from "../Commom/GlobalConst";
import BottomShareView from '../Components/BottomShareView';
import {_renderStickyHeader} from "../Utils/ViewUtils";
import SomethingItemView from "../Components/SomethingItemView";
import FoundAPIService from "../Commom/FoundAPIService";
import WebContainer from "../Components/WebContainer";
import CountryHomePage from "../Pages/CountryHomePage";
let width = Dimensions.get('window').width;

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    borderStyles: {
        marginTop: 5,
        backgroundColor: 'white',
        borderBottomWidth: 1,
        borderTopWidth: 1,
        borderColor: "#F1F1F1",
    },
    somethingStyle: {
        flexDirection: 'row',
        padding: 15,
        paddingBottom: 5,
        alignItems: 'center',
    },
    button: {
        borderRadius: 5,
        backgroundColor: '#38D68B',
        width: 60,
        height: 30,
        color: 'white',
        textAlign: 'center',
        textAlignVertical: 'center',
    },
});

/**
 * 活动详情
 */
class EventDetailsPage extends React.Component {

    constructor(props) {
        super(props);
        var travelImageData = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            paddingBottom: new Animated.Value(10),
            dataSource: new ViewPager.DataSource({
                pageHasChanged: (p1, p2) => p1 !== p2
            }),
            travelImageDataSource: travelImageData,
            introduce: {},
            recentlyEvent: [],
            village: {},
            flag: false,
            images: [],
        }
    }


    componentDidMount() {
        this.onFetch();
    }

    onFetch() {
        let id = this.props.ID;
        if (!id) {
            id = 1;
        }

        console.log(id);
        InteractionManager.runAfterInteractions(() => {
            FoundAPIService.activityDetail(id).then((ret)=> {
                this.setState({
                    images: ret.images,
                    dataSource: this.state.dataSource.cloneWithPages(ret.images),
                    travelImageDataSource: this.state.travelImageDataSource.cloneWithRows(ret.images),
                    introduce: ret,
                    recentlyEvent: ret.recently_event,
                    flag: true,
                });
            }).catch((err)=> {

            });
        });

    }

    viewPagerItemClick() {
        this.props.navigator.push({
            name: 'ImageViewer',
            component: ImageViewer,
            passProps: {
                source: this.state.images,
            }
        })
    }

    _renderViewPager() {
        return (
            <View style={{height: 245,width,}}>
                {this.state.images.length > 1 ? <ViewPager
                    locked={false}
                    isLoop={true}
                    autoPlay={true}
                    renderPageIndicator={false}
                    renderPage={(page) => {
                    return (
                        <TouchableOpacity onPress={() => this.viewPagerItemClick()}>
                            <Image source={{uri:page}}
                                   style={{height: 245,width,}}
                            />
                        </TouchableOpacity>
                    )
                }}
                    dataSource={this.state.dataSource}
                />
                    :
                    <TouchableOpacity onPress={() => this.viewPagerItemClick()}>
                        <Image source={{uri:this.state.images[0]}}
                               style={{height: 245,width,}}
                        />
                    </TouchableOpacity>}

            </View>
        )
    }

    goToRuralDetailsPage() {
        this.props.navigator.push({
            name: 'CountryHomePage',
            component: CountryHomePage,
            passProps: {
                ID: this.state.introduce.rural_list.id,
            }
        })
    }

    render() {
        var html = '<!DOCTYPE html><html lang="zh-cn"><head><meta charset="utf8" /><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=0"></head><body><div style="padding: 8px;">' + this.state.introduce.content + '</div></body></html>';

        return (
            <Animated.View style={[styles.container, {paddingBottom: this.state.paddingBottom}]}>
                {
                    this.state.flag ? <ParallaxScrollView
                        showsVerticalScrollIndicator={false}
                        contentBackgroundColor={'white'}
                        backgroundColor={'white'}
                        headerBackgroundColor="#333"
                        stickyHeaderHeight={ 65 }
                        parallaxHeaderHeight={ 245 }
                        backgroundSpeed={10}
                        renderForeground={() => this._renderViewPager()}
                        renderStickyHeader={() => _renderStickyHeader(this.state.introduce.title)}
                        renderFixedHeader={() => {
                            return (
                                <FixedHeader navigator={this.props.navigator}
                                rightFunc={() => {
                    this.shareView.showShareView();
                }}/>
                            )
                        }}
                    >
                        <View style={{flex: 1, backgroundColor: '#F5F5F5'}}>
                            <View
                                style={{padding: 10, backgroundColor: 'white', marginBottom: 1,paddingRight: 15,paddingLeft: 15}}>
                                <Text numberOfLines={1}
                                      style={{fontSize: 18, color: '#333'}}>
                                    {this.state.introduce.title}
                                </Text>
                                {this.state.introduce.price.length > 0 ?
                                    <Text style={{fontSize: 16, color: '#333', marginTop: 10}}>价格： <Text
                                        numberOfLines={1}
                                        style={{fontSize: 16, color: 'red', marginTop: 10}}>{'￥' + this.state.introduce.price} </Text>
                                    </Text>
                                    : null}
                            </View>
                            <TouchableOpacity onPress={() => this.goToRuralDetailsPage()}>
                                <View
                                    style={{width,height:45,flexDirection: 'row', marginBottom: 1, justifyContent: 'space-between',alignItems: 'center',padding: 15,backgroundColor:'white'}}>
                                    <Text numberOfLines={1}
                                          style={{fontSize: 16,color: '#333',flex: 1}}
                                    >{'所属乡村：' + this.state.introduce.rural_list.title}</Text>
                                    <Image
                                        style={{width: 20,height: 20}}
                                        source={require('../../Image/arrow.png')}/>
                                </View>
                            </TouchableOpacity>
                            <View style={{
                                padding: 10,
                                flexDirection: 'row',
                                alignItems: 'center',
                                backgroundColor: 'white',
                                marginBottom: 1,
                                paddingRight: 15,
                                paddingLeft: 15
                            }}>
                                <Image
                                    style={{width: 15, height: 15, resizeMode: 'contain', marginRight: 10}}
                                    source={require('../../Image/icon_gray_date.png')}
                                />
                                <Text numberOfLines={1}
                                      style={{fontSize: 16, color: '#333', flex: 1}}>{this.state.introduce.start_time}</Text>
                            </View>
                            <View style={{
                                padding: 10,
                                flexDirection: 'row',
                                alignItems: 'center',
                                backgroundColor: 'white',
                                marginBottom: 1,
                                paddingRight: 15,
                                paddingLeft: 15
                            }}>
                                <Image
                                    style={{width: 15, height: 15, resizeMode: 'contain', marginRight: 10}}
                                    source={require('../../Image/icon_gray_position.png')}
                                />
                                <Text numberOfLines={1} style={{
                                    fontSize: 16,
                                    color: '#333',
                                    marginRight: 10
                                }}>{this.state.introduce.address}</Text>
                            </View>
                            <Text style={{
                                fontSize: 16,
                                color: '#333',
                                padding: 10,
                                marginTop: 5,
                                marginBottom: 1,
                                backgroundColor: 'white',
                                width,
                                paddingRight: 15,
                                paddingLeft: 15
                            }}>活动详情</Text>
                            <WebContainer html={html}/>
                            {this.state.recentlyEvent.length > 0 ? <View style={styles.borderStyles}>
                                <View style={styles.somethingStyle}>
                                    <Image style={{width: 15,height: 15,marginRight: 10,resizeMode: 'contain'}}
                                           source={require('../../Image/icon_booking.png')}
                                    />
                                    <Text style={{color: '#333', fontSize: 16}}>近期活动</Text>
                                </View>
                                <View style={{padding: 10, flexDirection: 'row'}}>
                                    {
                                        this.state.recentlyEvent ?
                                            this.state.recentlyEvent.map((item, index) => {
                                                return (
                                                    <SomethingItemView
                                                        key={"EventItem" + index}
                                                        item={item} navigator={this.props.navigator}
                                                        name={"EventDetailsPage"}
                                                        component={EventDetailsPage}
                                                    />
                                                )
                                            }) : null
                                    }
                                </View>
                            </View> : null}
                        </View>
                    </ParallaxScrollView>
                        :
                        <View style={{flex:1,backgroundColor:'#F5F5F5'}}><View
                            style={{position: 'absolute',top:0,left:0,width:Global.Const.size.width,height:Global.Const.size.height,backgroundColor:null,alignItems:'center',justifyContent:'center'}}>
                            <View
                                style={{backgroundColor:'#333333',borderRadius:5, alignItems: 'center',justifyContent: 'center',width:80,height:80}}>
                                <ActivityIndicator
                                    animating={this.state.animating}
                                    style={{ alignItems: 'center',justifyContent: 'center'}}
                                    size="large"/>
                                <Text style={{color:'white'}}>加载中...</Text>
                            </View>
                        </View>
                        </View>
                }
                <BottomShareView
                    shareTitle={this.state.introduce.title}
                    shareContent={this.state.introduce.content}
                    shareImageUrl={this.state.images[0]}
                    shareUrl={'http://xc.xiarikui.cn/Api/Index/share'}
                    ref={(ref) => {this.shareView = ref;}}/>
            </Animated.View>
        );
    }
}

export default EventDetailsPage;
